<template>
    <div style="width:100%;height:100%">
      <div style="height: 50px;">
        <el-row type="flex" :gutter="100" align="bottom">
          <el-col :span="6">
            <el-select clearable style="width: 150px" v-model="attendanceStatus" placeholder="选择状态">
              <el-option
                :key="'0'"
                label="进行中"
                value="0">
              </el-option>
              <el-option
                :key="'1'"
                label="结束"
                value="1">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select clearable style="width: 150px" v-model="CourseValue" placeholder="选择课程">
              <el-option
                v-for="item in Courseoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select clearable style="width: 150px" v-model="student" placeholder="选择学生">
              <el-option
                v-for="item in students"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select clearable style="width: 150px" v-model="attendanceResult" placeholder="选择结果">
              <el-option
                v-for="item in attendanceResults"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
    </div>
      <div style="height: 50px">
        <el-row type="flex" :gutter="100" align="bottom" style="margin-top: 10px">
          <el-col :span="24">
            <el-button  @click="search" type="primary">搜索结果</el-button>
            <el-button type="success" @click="publish">发布考勤</el-button>
            <el-button type="warning" @click="exportExcel">导出excel</el-button>
            <el-button type="info" @click="publish">查看分析图</el-button>
          </el-col>

        </el-row>
      </div>
      <div style="height: -webkit-calc(100% - 100px);margin-top: 5px">
        <xjr-table @custom-click="handleAttendance" :loading="loading" ref="course_table" :list="tableData" :headers="cols"></xjr-table>
      </div>
      <el-dialog :destroy-on-close="true"  width="30%" title="编辑考勤" :visible.sync="showDialog">
        <el-form ref="form" :model="currentAttendance" label-width="80px">
          <el-form-item label="学生姓名" >
            <el-input :disabled="true" v-model="currentAttendance.studentName"></el-input>
          </el-form-item>
          <el-form-item label="考勤课程">
            <el-input :disabled="true" v-model="currentAttendance.courseName"></el-input>
          </el-form-item>
          <el-form-item label="考勤规定时间" >
            <el-date-picker
              disabled
              v-model="currentAttendance.allowStartTime"
              type="datetime"
              placeholder="修改考勤规定时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="考勤规定最晚时间" >
            <el-date-picker
              disabled
              v-model="currentAttendance.allowTimeDifference"
              type="datetime"
              placeholder="修改考勤时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="考勤时间" required>
            <el-date-picker
              disabled=""
              v-model="currentAttendance.attendanceStartTime"
              type="datetime"
              placeholder="修改考勤时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="考勤状态"  prop="attendanceResultCode">
            <el-select @change="changeStatus" clearable style="width: 150px" v-model="currentAttendance.attendanceResultCode" placeholder="修改考勤状态">
              <el-option
                label="正常"
                :value="1">
              </el-option>
              <el-option
                label="迟到"
                :value="0">
              </el-option>
              <el-option
                label="缺勤"
                :value="2">
              </el-option>
              <el-option
                label="请假"
                :value="3">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业">
            <el-input :disabled="true" v-model="currentAttendance.majorName"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="save">保存</el-button>
          <el-button type="primary" @click="showDialog=false">取消</el-button>
        </div>
      </el-dialog>
      </div>
</template>

<script>
    export default {
        name: "TeacherAttendanceManage",
      data(){
          return {
            currentAttendance:{},//当前操作的考勤信息
            showDialog:false,
            attendanceStatus:'',//考勤状态
            tableData:[],//表格数据
            tableDataCache:[],
            loading:false,//表格状态
            Courseoptions:[],
            students:[],
            studentsCache:[],
            student:'',
            attendanceResult:'',
            attendanceResults:[{
              label:'缺勤',value:'2'
            },{
              label:'迟到',value:'0'
            },
              {
                label:'请假',value:'3'
              },
              {
                label:'正常',value:'1'
              }],
            CourseValue:'',//当前选中课程
            cols:[
              {prop:'studentNo',label:'学号',sort:false,hidden:false},
              {prop:'studentName',label:'学生姓名',sort:false,hidden:false},
              {prop:'courseName',label:'考勤课程',sort:false,hidden:false},
              {prop:'className',label:'班级',sort:false,hidden:false},
              {prop:'majorName',label:'专业',sort:false,hidden:false},
              {prop:'gradeName',label:'年级',sort:false,hidden:false},
              {prop:'departmentName',label:'学院',sort:false,hidden:false},
              {prop:'assistantName',label:'辅导员',sort:false,hidden:false},
              {prop:'attendanceStartTime',label:'考勤时间',sort:false,hidden:false,dataType:'date'},
              {prop:'attendanceResult',label:'考勤结果',sort:false,hidden:false},
              {prop:'ip',label:'ip地址',sort:false,hidden:false},
              {prop:'operate',label:'操作',hidden:false,options:[
                  {label:'编辑',prop:'edit',type: 'success'}
                ]}
            ]

          }
      },
      methods:{
          //弹窗下拉框选中事件
        changeStatus(){
          this.$set(this.currentAttendance,'changed',true);
        },
        handleAttendance(index,row,customtype){
          console.log(row.attendanceStartTime)
          let g=this;
          g.currentAttendance=JSON.parse(JSON.stringify(row));
          g.$set(g.currentAttendance,'changed',false);
          g.showDialog=true;
        },
        search(){
          let g=this;
          g.tableDataCache=[];
          g.studentsCache=[];
          g.students=[];
          g.tableData=[];
          g.Courseoptions=[];
          this.init().then(res=>{
            g.$nextTick(()=>{
              g.tableData=g.tableData.filter(data=>{
               if (!g.isNullOrEmpty(g.attendanceResult)){
                 return data.attendanceResultCode==g.attendanceResult
               }
               return true;
              }).filter(data=>{
                if (!g.isNullOrEmpty(g.student)){
                  return data.studentNo==g.student
                }
                return true;
              }).filter(data=>{
                if (!g.isNullOrEmpty(g.CourseValue)){
                  return data.courseNo==g.CourseValue
                }
                return true;
              }).filter(data=>{
                if (!g.isNullOrEmpty(g.attendanceStatus)){
                  return data.attendanceStatus==g.attendanceStatus
                }
                return true;
              });
            })

          });
        },
          //发布考勤
        publish(){
          let g=this;
          g.$ajaxGet('/attendanceParent/all',{publishNo:g.$store.getters.userId,totalSuccessFlag:0}).then(res=>{
            if (!g.isNullOrEmpty(res) && res.length>0){
              g.message({type:'warning',message:'当前有未完成考勤任务,暂时不能发布考勤'});
            }else{
              g.$router.push({path:'/attendance-manage/publish-attendance',replace:true})
            }
          })
        },
        loadStudents(){
          let g=this;
          return g.$ajaxGet('/attendanceParent/getTeacherCourseStudents/');

        },
         async init() {
          let g=this;
          g.tableDataCache= await this.$ajaxGet('/attendanceParent/getAttendanceInfo');
          g.studentsCache=await g.loadStudents();
          g.students=g.studentsCache.map(data=>{
            g.$set(data,'label',data.name);
            g.$set(data,'value',data.guid);
            return data;
          })
          g.tableData=JSON.parse(JSON.stringify(g.tableDataCache)).map(data=>{
            switch (data.attendanceResultCode) {
              case 0:
                data.attendanceResult='迟到';
                break;
                case 1:
                  data.attendanceResult='正常';
                  break;
                  case 2:
                    data.attendanceResult='缺勤';
                    break;
                    case 3:
                      data.attendanceResult='请假';
                      break;
                      default:
                        data.attendanceResult='';
                        break;
            }
            return data
          }).filter(data=>{
            return data.attentAncePublishId=g.$store.getters.userId;
          });
          g.$nextTick(()=>{
            //加载课程
            g.$ajaxGet('/course/all',{teacherId:g.$store.getters.userId}).then(data=>{
              g.Courseoptions=data.map(res=>{
                g.$set(res,'label',res.courseName);
                g.$set(res,'value',res.courseNo);
                return res;
              })
              g.$nextTick(()=>{
                g.loadStudents();
              })
            })
          })
           // g.loadStudents();

        },
        formatJson(filterVal, jsonData) {
          let g=this;
          return jsonData.map(v => filterVal.map(j => {
            if (g.isNullOrEmpty(v[j])){
              v[j]='无';
            }
            return v[j]

          }))
        },
        exportExcel(){
          let g=this;
          import('@/vendor/Export2Excel').then(excel => {
              let tHeader = g.cols.map(res=>{
                return res.label
              })
             tHeader.splice(g.cols.length-1,1);

              let list = g.tableData
              let filterVal=g.cols.map(res=>res.prop);
              filterVal.splice(g.cols.length-1,1);
              let data = g.formatJson(filterVal, list)
              excel.export_json_to_excel({
                header: tHeader,
                data,
                filename: 'excel-list',
                autoWidth: true
              })

            })

        },
        //弹窗保存事件
        save(){
          let g=this;
          if (!g.isNullOrEmpty(g.currentAttendance) && g.currentAttendance.changed==true){
            if (g.isNullOrEmpty(g.currentAttendance.attendanceResultCode)){
              g.message({type:'error',message:'考勤状态不得为空'});
              return;
            }else{
              g.$ajaxPost('/attendanceSon/update',{guid:g.currentAttendance.attendanceSonId,attentanceFlag:g.currentAttendance.attendanceResultCode,successFlag:1}).then(res=>{
                g.$alert('更新成功', '提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    g.showDialog=false;
                  }
                });
              }).then(res=>{

              })
            }
          }else{
            g.message({message:'未作修改',type:'warning'});
            return;
          }
        }
      },
      created() {
          this.init();
      }

    }
</script>

<style scoped>

</style>
